<template>
  <div class="dashboard_main">
    <el-tooltip effect="dark" content="应用列表" placement="left">
      <div class="toAppsBtn" @click="toApps"></div>
    </el-tooltip>
    <div class="main-container" ref="mainContainer">
      <search-header-fixed
        :show="showSearchFixed"
        @toTop="toTop"
      ></search-header-fixed>
      <search-header></search-header>
      <div class="first-row">
        <div class="frequently-used-apps-block">
          <frequently-used-apps></frequently-used-apps>
        </div>
        <div class="my-pending-block">
          <my-pending></my-pending>
        </div>
      </div>
      <div class="second-row">
        <all-apps></all-apps>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapActions } from "vuex";
import { findAll_axios, editUserApp_axios } from "@/api/wordbench";
import searchHeader from '../components/searchHeader'
import frequentlyUsedApps from '../components/frequentlyUsedApps'
import myPending from '../components/myPending'
import allApps from '../components/allApps'
import searchHeaderFixed from '../components/searchHeaderFixed'
export default {
  name: "dashboard",
  props: {
    // workList: {
    //   type: Array,
    //   default: [],
    // },
    // officialManageTotal: {
    //   type: Number,
    //   default: 0,
    // },
  },
  components: {
    searchHeader,
    frequentlyUsedApps,
    myPending,
    allApps,
    searchHeaderFixed,
  },
  data() {
    return {
      showSearchFixed: false,
    };
  },
  computed: {
    ...mapState(["myInfo", "icReadDriveOpen"]),
  },
  created() {
  },
  mounted() {
    this.$refs['mainContainer'].addEventListener('scroll',this.checkTop)
  },
  beforeDestroy() {
    this.$refs['mainContainer'].removeEventListener('scroll',this.checkTop)
  },
  methods: {
    //视图定位到应用列表
    toApps(){
      this.$nextTick(()=>{
        this.$refs['mainContainer'].scrollTop = 510
      })
    },
    //滚动条回到最上
    toTop(){
      this.$nextTick(()=>{
        this.$refs['mainContainer'].scrollTop = 0
      })
    },
    checkTop(){
      if(this.$refs['mainContainer'].scrollTop > 110){
        this.showSearchFixed = true
      } else {
        this.showSearchFixed = false
      }
    },
  },
  watch: {
    // "reqLoading.state"(v) {
    //   console.log(v, 45111111);
    // },
  },
};
</script>
<style lang="less" scoped>
.dashboard_main {
  //height: 100vh;
  //width: calc(100vw - 56px);
  width: 100%;
  height: calc(100vh - 40px);
  padding-bottom: 16px;
  overflow: hidden;
  //background: url(/static/image/dashboard/main-bg.png) no-repeat right top;
  background: url('~@/assets/dashboard/main-bg.png') no-repeat right top;
  background-color: #f2f3f6;
  position: relative;
}
.toAppsBtn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background-image: url('~@/assets/dashboard/to-apps-btn.png');
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 100;
  border-radius: 8px;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  &:hover {
    background-image: url('~@/assets/dashboard/to-apps-btn-active.png');
  }
}
.main-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0 16px;
  &::-webkit-scrollbar {
    width: 0; //隐藏滚动条
  }
  .first-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .frequently-used-apps-block {
      width: calc(100% - 318px);
    }
    .my-pending-block {
      width: 302px;
    }
  }
  .second-row {
    width: 100%;
    margin-top: 16px;
  }
}
</style>
